<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial￾scale=1.0">
    <title>DOM2</title>
</head>
<body>
    <img id="light" src="img/off.gif"> <br>
    <input type="button" value="点亮" onclick="on()">
    <input type="button" value="熄灭" onclick="off()">
    <br> <br>
    <input type="text" id="name" value="BRIUP" onfocus="lower()"
    onblur="upper()">
    <br> <br>
    <input type="checkbox" name="hobby"> 电影
    <input type="checkbox" name="hobby"> 旅游
    <input type="checkbox" name="hobby"> 游戏
    <br>
    <input type="button" value="全选" onclick="checkAll()">
    <input type="button" value="反选" onclick="reverse()">
    </body>
    <script>
    function on(){
        var img = document.getElementById("light");
        img.src = "D:\\Users\\86156\\Desktop\\HTNL-CSS-JS-Vue\\day51\\img\\on.gif";
    }
    function off(){
        var img = document.getElementById("light");
        img.src = "D:\\Users\\86156\\Desktop\\HTNL-CSS-JS-Vue\\day51\\img\\off.gif";
    }
    function lower(){
        var input = document.getElementById("name");
        input.value = input.value.toLowerCase();
    }
    function upper(){
        var input = document.getElementById("name");
        input.value = input.value.toUpperCase();
    }
    function checkAll(){
        var hobbys = document.getElementsByName("hobby");
        for (let i = 0; i < hobbys.length; i++) {
            const element = hobbys[i];
            element.checked = true;
        }
    }
    function reverse(){
        var hobbys = document.getElementsByName("hobby");
        for (let i = 0; i < hobbys.length; i++) {
            const element = hobbys[i];
            if(element.checked)
            element.checked = false;
            else
            element.checked = true;
        }
    }
</script>
</html>